<template>
	<div class="page-activity">
		<Head navTitle="全部赛事" />
		<div class="bs-panel ht-panel">
			<div class="g-panel_hd flex-center flex-zBetween">
				<div class="g-count flex-center">
					<div class="g-text">距离关盘guliguanpan</div>
					<van-count-down :time="Counttime">
						<template #default="timeData">
							<span class="time-block">{{ timeData.hours }}</span>
							<span class="colon">:</span>
							<span class="time-block">{{ timeData.minutes }}</span>
							<span class="colon">:</span>
							<span class="time-block">{{ timeData.seconds }}</span>
						</template>
					</van-count-down>
				</div>
				<div class="g-action flex-center">
					<div class="g-time">16:40 更新</div>
					<el-button size="mini" type="success">刷新</el-button>
				</div>
			</div>
			<div class="g-list-table-panel">
				<div class="game-vs">
					<div class="vs-title">澳大利亚职业足球联赛</div>
					<div class="vs-flex flex-center flex-hc">
						<div class="vs-title">神户胜利船shenghushenglichuan</div>
						<div class="vs-card_bd">
							<div class="vs-value">反波胆 <span class="score">0-1</span></div>
							<div class="vs-time">2021 04-21 04:00</div>
						</div>
						<div class="vs-title">德岛漩涡dedaoxuanwo</div>
					</div>
				</div>
				<el-table stripe v-infinite-scroll="load" infinite-scroll-disabled="disabled" :data="tableData"
					style="width: 100%">
					<el-table-column prop="jtit" align="center" label="项目" width="80">
					</el-table-column>
					<el-table-column prop="jprice" align="center" label="交易量" width="129">
					</el-table-column>
					<el-table-column prop="progress" align="center" label="进度">
						<template slot-scope="scope">
							<el-progress stroke-width="12" :percentage="scope.row.progress"></el-progress>
						</template>
					</el-table-column>
				</el-table>
				<div class="load-more" v-if="loading"><i class="el-icon-loading"></i> 加载中...</div>
				<div class="load-more" v-if="noMore">没有更多了</div>
				<div class="bs-j-footer flex flex-zBetween">
					<div class="j-data"><span class="text">总交易量</span> <span class="val text-green">2,853,799,558</span>
					</div>
					<div class="j-time"><span class="text">最后更新时间</span> <span class="val">04-25
							16:29</span></div>
				</div>
			</div>
		</div>
			
	</div>
</template>

<script>
	// @ is an alias to /src
	import Head from '@/components/Head.vue'
	export default {
		name: 'Home',
		components: {
			Head
		},
		data() {
			return {

				Counttime: 30 * 60 * 60 * 1000,
				tableData: [{
					jtit: '0-0',
					jprice: '289,832,201.00',
					progress: 14
				}, {
					jtit: '0-0',
					jprice: '289,832,201.00',
					progress: 14
				}, {
					jtit: '0-0',
					jprice: '289,832,201.00',
					progress: 14
				}, {
					jtit: '0-0',
					jprice: '289,832,201.00',
					progress: 14
				}, {
					jtit: '0-0',
					jprice: '289,832,201.00',
					progress: 14
				}, {
					jtit: '0-0',
					jprice: '289,832,201.00',
					progress: 14
				}, {
					jtit: '0-0',
					jprice: '289,832,201.00',
					progress: 14
				}, {
					jtit: '0-0',
					jprice: '289,832,201.00',
					progress: 14
				}, {
					jtit: '0-0',
					jprice: '289,832,201.00',
					progress: 14
				}, {
					jtit: '0-0',
					jprice: '289,832,201.00',
					progress: 14
				}, ],
				count: 10,
				loading: false,

			};
		},
		computed: {
			noMore() {
				return this.count >= 20
			},
			disabled() {
				return this.loading || this.noMore
			},
		},
		methods: {
			load() {
				this.loading = true
				setTimeout(() => {
					for (let i = 0; i < 15; i++) {
						this.tableData.push({
							jtit: '0-0',
							jprice: '289,832,201.00',
							progress: 14
						});
					}
					this.loading = false
				}, 1000)
			},
		}
	}
</script>
